<template>
    <div class="pagination">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            layout="total, sizes, prev, pager, next, jumper"
            :page-sizes="[10, 20, 50, 100, 500]"
            :current-page="currentPage"
            :page-size="limit"
            :total="total"
        />
    </div>
</template>

<script>
import { getCurrentInstance } from 'vue';

export default {
    name: 'SearchPagination',
    props: {
        total: {
            required: false,
            default: 0,
        },
        limit: {
            required: false,
            default: 20,
        },
        currentPage: {
            required: false,
            default: 1,
        },
    },
    setup(props, { emit }) {
        const internalInstance = getCurrentInstance();
        const $bus = internalInstance.appContext.config.globalProperties.$bus;
        const handleCurrentChange = (value) => {
            $bus.emit('scrollChange', 0);
            emit('handleCurrentChange', value);
        };
        const handleSizeChange = (value) => {
            emit('handleSizeChange', value);
        };
        return { handleCurrentChange, handleSizeChange };
    },
};
</script>

<style scoped>
.pagination {
    margin: auto 0px;
    text-align: right;
}
</style>
